<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords"
    content="HTML,CSS,HTML5,CSS3,ES6,JavaScript,Vue,Vue.js,TS,TypeScript,webpack,node.js,git,npm,前端,全栈,Web开发" />
  <meta name="description" content="一位Web开发工程师的学习、工作笔记-星之痕。
    内容涵盖：HTML,CSS,HTML5,CSS3,ES6,JavaScript,Vue,Vue.js,TS,TypeScript,前端,全栈,Web开发……等" />
  <title>vue组件-Vue.js 笔记-星之痕</title>
  <link rel="stylesheet" href="./css/global.css">
</head>

<body>
  <div id="app">
    <!-- 调用组件 -->
    <v-note :title='title' :messages='messages'></v-note>
    <v-comp :c-info="info"></v-comp>
  </div>

  <!-- 自定义组件模板 -->
  <template id='comp'>
    <div>
      <h2>{{msg}}</h2>
      <h2>{{cInfo}}</h2>
    </div>
  </template>

  <!-- 组件模板 -->
  <template id='note'>
    <div>
      <h2>{{title}}</h2>
      <ul>
        <li v-html="msg" v-for='msg in messages'></li>
      </ul>
    </div>
  </template>

  <script src="js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; //阻止vue页面在启动时的生产提示

    // 自定义组件
    const vComp = {
      template: '#comp',
      data() {
        return {
          msg: '这是一个子组件',
        }
      },
      props: {
        cInfo: {
          default() {
            return {};
          }
        }
      }
    }

    // 笔记列表组件
    const vNote = {
      template: '#note',
      props: {
        title: String,
        messages: {
          type: Array,
          default() {
            return [];
          }
        }
      },
    }

    const app = new Vue({
      el: '#app',
      data: {
        title: '组件demo',
        messages: [
          `这是一个简单的组件demo`,
        ],
        info: 'this is a message',
      },
      components: {
        vNote,
        vComp,
      },
      computed: {},
      methods: {},
    });
  </script>
</body>

</html>
